import React from 'react';
import {Table, Input, Select, Form, Box, Button, Card, DatePicker, Message, Radio, Collapse,Upload, Switch, Dialog, Grid } from '@alifd/next';
import styles from './index.module.scss';

import {detailV, update} from '@/api/RotationImageAPI'
import {upLoadImage, upLoadApk} from '@/api/CommonAPI'
import {getOptionValue} from '@/utils/tool'
import JsonUtils from '@/utils/JsonUtils'
const {Row, Col} = Grid;
const FormItem = Form.Item;
const Panel = Collapse.Panel;
const formItemLayout = {
  colSpan: 12,
};

const formItemLayout_two = {
    colSpan: 6,
};
const formItemLayout_three = {
    colSpan: 4,
};

const DEFAULT_DATA = {
    id : '',
    serialNum :'',
    type :'0',
    pageType :'',
    pagePosition :'1',
    weight :'',
    state : '0',
    images :[],
    publishTime :'',
    remark : '',
    createTime : '',
    createId : '',
    createName : '',
    updateTime : '',
    updateId : '',
    updateName : '',
  };

class UpdateRotationImage extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            postData: DEFAULT_DATA,
            visible: false,
            statesDataOption: [],
            typeDataOption:[],
            pageTypeDataOption:[],
            pagePositionDataOption:[],

        };
    }

    
    // 初始化方法
    componentDidMount(){
        this.props.onRef(this)
    };

    // 1 打开弹框
    onOpen = (key, statesData, typeData, pageTypeData, pagePositionData) => {
        this.resetForm(); 
        detailV(key).then((data)=>{
            if(data){
                // 遍历赋值
                for(var k in data){
                    DEFAULT_DATA[k] = data[k]
                }
                // 处理图片预览
                data.images.map((item)=>{
                    item.state = 'done'
                    item.uid = item.id
                })
                this.setState({
                    statesDataOption: statesData,
                    typeDataOption: typeData,
                    pageTypeDataOption: pageTypeData,
                    pagePositionDataOption: pagePositionData,
                    postData: DEFAULT_DATA,
                    visible: true,
                })
            }else{
                Message.error("加载数据失败...")
            }
        });
    };
    // 2 关闭弹框
    onClose = () => {
        this.setState({
            visible: false
        })
    };
    // 3 修改表单信息
    formChange = values => {
        this.setState({
            postData: values
        })
    };

    // 4 改变表单--轮播类型
    changeType= (v) => {
        DEFAULT_DATA.type = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };
    // 5 改变表单--页面类型
    changePageType= (v) => {
        DEFAULT_DATA.pageType = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };   
    // 6 改变表单--位置
    changePagePosition= (v) => {
        DEFAULT_DATA.pagePosition = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };   
    // 7 改变表单--权重
    changeFormWeight= (v) => {
        DEFAULT_DATA.weight = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };   
    // 8 改变表单--备注
    changeFormRemark= (v) => {
        DEFAULT_DATA.remark = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };
    // 8 改变表单--名称
    changePictureName= (v) => {
        DEFAULT_DATA.pictureName = v;
        this.setState({
            postData: DEFAULT_DATA,
        })
    };
    
    /**
     * 上传图片
     * @param {*} info 
     */
    upLoadImageBegin = (info) => {
        // 1 调用上传API
        let filename = info.filename;
        console.log('info is:::', filename)
        upLoadImage( 'file', info.file).then((data)=>{
            if(data){
                // 2 
                if(filename == 'images'){
                    DEFAULT_DATA.images.push(data)
                } 
                // 4 回显信息
                let onSuccessInfo = {
                    success: true,
                    uid: data.id,
                    url: data.url,
                }
                info.onSuccess(onSuccessInfo);
            }else{
                console.log('上传失败')
            }
        });
    };

    // 删除图片信息
    onRemoveImage =(filename, info) =>{
        console.log('onRemoveImage info is:::', info)
        console.log('onRemoveImage filename is:::', filename)
    }
    // 删除图片信息
    onRemoveMainImage =(info) =>{
        console.log('onRemoveImage info is:::', info)
    }
    // 提交表单信息
    onSubmit = (values, errors) => {
        if (errors) {
          console.log('errors', errors);
          return;
        }
        // 调用修改API接口
        update(DEFAULT_DATA).then((flag)=>{
            if(flag){
                Message.success('提交成功');
                this.resetForm(); // 清空表单源数据
                this.onClose();
                this.props.onFreshList();
            }else{
                return
            }
        });
    };
    /**
     * 重置表单
     */
    resetForm = ()=>{
        DEFAULT_DATA.id = '',
        DEFAULT_DATA.serialNum ='',
        DEFAULT_DATA.type ='0',
        DEFAULT_DATA.pageType ='',
        DEFAULT_DATA.pagePosition ='1',
        DEFAULT_DATA.weight ='',
        DEFAULT_DATA.state = '0',
        DEFAULT_DATA.images =[],
        DEFAULT_DATA.publishTime ='',
        DEFAULT_DATA.remark = '',
        DEFAULT_DATA.createTime = '',
        DEFAULT_DATA.createId = '',
        DEFAULT_DATA.createName = '',
        DEFAULT_DATA.updateTime = '',
        DEFAULT_DATA.updateId = '',
        DEFAULT_DATA.updateName = '',
        this.setState({
            DEFAULT_DATA,
        })
    }

    onPreview(info){
        console.log('onPreview:::', info);
    }

    render(){
        return (
            <div > 
                <Dialog title="修改轮播图信息" visible={this.state.visible} footer ={false}  onClose={this.onClose} style={{width: '40%'}} >
                    <Card free className={styles.TwoColumnForm}>
                    <Card.Content>
                        <Form responsive fullWidth value={this.state.postData} labelAlign="top">
                            <FormItem {...formItemLayout_two} label="序列号" required requiredMessage="必填">
                                <Input name="serialNum" placeholder="自动生成" disabled />
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="名称" required requiredMessage="必填">
                                <Input name="pictureName" placeholder="请填写名称" onChange={this.changePictureName}  />
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="轮播类型"  required requiredMessage="必填">
                                <Select name='type' placeholder="选择轮播类型" dataSource= {this.state.typeDataOption || []}  onChange={this.changeType}  hasClear/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="权重" required requiredMessage="必填">
                                <Input name="weight" placeholder="请输入权重" onChange={this.changeFormWeight} />
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="页面类型"  required requiredMessage="必填">
                                <Select name='pageType' placeholder="选择页面类型" dataSource= {this.state.pageTypeDataOption || []}  onChange={this.changePageType}  hasClear/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="页面位置"  required requiredMessage="必填">
                                <Select name='pagePosition' placeholder="选择页面位置" dataSource= {this.state.pagePositionDataOption || []}  onChange={this.changePagePosition}  hasClear/>
                            </FormItem>

                            <FormItem {...formItemLayout_two} label="轮播图" required requiredMessage="必填">
                                <Upload.Card name="images" listType="card"
                                    accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
                                    request={this.upLoadImageBegin}
                                    onRemove={this.onRemoveMainImage}
                                    onPreview={this.onPreview}
                                    limit={1}
                                />
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="备注">
                                <Input.TextArea placeholder="请输入备注" name="remark" onChange={this.changeFormRemark}/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="状态" required requiredMessage="必填">
                                <Select name='state' placeholder="选择页面类型" dataSource= {this.state.statesDataOption || []} disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="发布时间">
                                <Input name="publishTime" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="创建人">
                                <Input name="createName" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="创建时间">
                                <Input name="createTime" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="最后一次修改人">
                                <Input name="updateName" disabled/>
                            </FormItem>
                            <FormItem {...formItemLayout_two} label="最后一次时间">
                                <Input name="updateTime" disabled/>
                            </FormItem>
                            <FormItem colSpan={12} style={{marginLeft:'35%'}}>
                                <Box spacing={8} direction="row" align="center">
                                    <Form.Submit type="primary" onClick={this.onSubmit} validate>提交</Form.Submit>
                                    <Button onClick={this.onClose} type="secondary">取消</Button>
                                </Box>
                            </FormItem>
                        </Form>
                    </Card.Content>
                    </Card>
                </Dialog>
            </div>
        );
    }
}
export default UpdateRotationImage;
